<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
		<view class="bargain-container">
			<view class="header">
				<!-- <view class="row-between" style="padding-top: 46rpx;">
                <view></view>
                <view class="rule-contain row">
                    <u-icon name="question-circle-fill" size="30" :color="primaryColor" />
                    <view class="xxs primary" style="margin-left: 6rpx;">
                        规则
                    </view>
                </view>
            </view> -->
			</view>
            
			<view class="main">
				<view class="activity-box">
					<view class="activity-item row mt20" style="" v-for="(item, index) in lists" :key="index">
						<u-image width="180rpx" height="180rpx" :src="item.image" border-radius="10rpx" />
						<view class="activity-info">
							<view class="activity-name line2 nr">
								{{item.name}}
							</view>
							<view class="row-between">
								<view class="column">
									<view class="xs" style="color: #F95F2F;">
										最低可砍至
										<price-format showSubscript :subscriptSize="26" :firstSize="34" :secondSize="34"
											weight="500" :price="item.activity_price" />
									</view>
									<view class="mt10 xs muted">
										单买 ¥{{item.price}}
									</view>
								</view>
								<navigator :url="'/bundle/pages/bargain_process/bargain_process?activityId=' + item.id"
									hover-class="none" class="lunch-btn white row-center">
									发起砍价
								</navigator>
							</view>
						</view>
					</view>
				</view>
                
                <view class="mt30 row-center white" style="padding-top: 200rpx;" v-if="lists.length == 0">
                    暂无砍价商品
                </view>
			</view>
			<float-tab></float-tab>
		</view>
	</mescroll-body>
</template>

<script>
	import {getBargainList} from '@/api/activity'
    import {loadingType} from "@/utils/type"
	import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin,MescrollCompMixin],
		data() {
			return {
				upOption: {
					empty: {
						icon: '/static/images/goods_null.png',
						tip: "暂无商品",
					}
				},
				lists: [],
                loadingStatus: loadingType.LOADING
			}
		},
		methods: {
            // 请求砍价活动的列表
            applyList(page) {
                getBargainList({
                	page_size:page.size,
                	page_no:page.num
                }).then(({
                	data
                }) => {
                	if (page.num == 1) this.lists = [];
                	const curPageData = data.list;
                	const curPageLen = curPageData.length;
                	const hasNext = !!data.more;
                	this.lists = this.lists.concat(curPageData);
                	this.mescroll.endSuccess(curPageLen, hasNext);
                }).catch(() => {
                	this.mescroll.endErr()
                })
            },
            // 触底
			upCallback(page) {
				this.applyList(page)
			},
            // 下拉
            downCallback(page) {
				this.applyList(page)
            }
		}
	}
</script>

<style lang="scss">
     @import "@/styles/base.scss";
    
	.bargain-container {
		background-color: #EE2466;
		min-height: 100vh;

		.header {
			height: 319rpx;
			background-image: url();
			background-size: 100% 100%;

			.rule-contain {
				background-color: rgba(255, 255, 255, 0.8);
				border-radius: 100rpx;
				padding: 6rpx 10rpx;
				margin-right: 24rpx;
			}
		}

		.main {
			margin-top: -70rpx;
			position: relative;

			.activity-box {
				padding: 10rpx 24rpx;

				.activity-item {
					background-color: white !important;
					padding: 30rpx 24rpx;
					border-radius: 20rpx;

					.activity-info {
						margin-left: 24rpx;
						flex: 1;

						.activity-name {
							line-height: 40rpx;
							margin-bottom: 8rpx;
						}

						.lunch-btn {
							background: linear-gradient(270deg, #FF2C3C 0%, #F95F2F 100%);
							height: 62rpx;
							width: 172rpx;
							border-radius: 10rpx;
							align-self: flex-end;
						}
					}
				}
			}

			.data-null {
                text-align: center;
				padding-top: 150rpx;
			}
		}
	}
</style>
